<template>
    <div>
        <el-dialog :title="popover.title" v-model="showPopover" @close="handleHidePopover" v-show="showPopover" class="el-title el-delete">
            <el-form>
                <el-form-item :label="popover.name" :label-width="formLabelWidth">
                    <el-input class="el-input-title" v-model="popover.adName" auto-complete="off" :maxlength="50"></el-input>
                    <span class="stringCount" @click="edit($event)">{{50 - (popover.adName ? popover.adName.length : 0)}}</span>
                </el-form-item>
            </el-form>

            <div class="aim" v-show="popover.target">
                <span><i class="iconfont icon-tip"></i>广告目标 :&nbsp;</span>
                <span>{{popover.target}}</span>
            </div>

            <div slot="footer">
                <div class="btn_common_white btn_common_small btn_common_cancel" @click="handleHidePopover">取消</div>
                <el-button v-if="!feedbackStatus" class="yellow-button-small" @click="editAds">保存</el-button>
                <el-button v-if="feedbackStatus" class="yellow-button-small" :loading="true">保存中</el-button>
            </div>
        </el-dialog>

        <el-dialog v-model="showTipPopover" @close="handleHideTipPopover" v-show="showTipPopover" class="el-delete">
            <div class="tip-wrapper">
                <div class="tip-left">
                    <i class="iconfont icon-tip icon-tip2"></i>
                </div>
                <div class="tip-right">
                    <span class="tip-title">删除提示</span>
                    <span class="tip-txt" v-show="type == 0">对应的广告组和广告都将被删除,是否确认删除?</span>
                    <span class="tip-txt" v-show="type == 1">对应的广告将被删除,是否确认删除?</span>
                    <span class="tip-txt" v-show="type == 2">是否确认删除该广告?</span>
                </div>
            </div>

            <div slot="footer">
                <div class="btn_common_white btn_common_small btn_common_cancel" @click="handleHideTipPopover">取消</div>
                <el-button v-if="!feedbackStatus" class="yellow-button-small" @click="deleteAds">确定</el-button>
                <el-button v-if="feedbackStatus" class="yellow-button-small" :loading="true">删除中</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import Vue from 'vue'
    import {SHOW_POPOVER,SHOW_TIP_POPOVER} from '../../../store/mutation-types/manager'
    import { mapGetters } from 'Vuex'
    import { Dialog, Form ,FormItem, Option , Button, Message} from 'element-ui'
    Vue.use(Dialog);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Option);
    Vue.use(Button);

    export default{
        data(){
            return{
                formLabelWidth: '120px',
                deleteData: {},
                editData: {}
            }
        },
        methods: {
            edit(e) {
                let input = e.target.parentNode.querySelectorAll('input')[0];
                setTimeout(() => {
                    input.focus();
                }, 0);
            },
            handleHidePopover() {
                this.$store.commit('SHOW_POPOVER',{showPopover: false});
                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
            },
            handleHideTipPopover() {
                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
            },
            editAds() {
                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: true});
                this.editData = {
                    'localId': this.popover.localId,
                    'platFormId': this.popover.platFormId,
                    'name': this.popover.adName
                };
                switch(this.type){
                    case 0:
                        this.$store.dispatch('updateAdSeries',this.editData)
                            .then(response => {
                                if(response.data && response.data.code == 1){
                                    Message.success({
                                        message: '修改成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                            });
                        break;
                }
            },
            deleteAds() {
                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: true});
                this.deleteData = {
                    'localId': this.tipPopover.localId,
                    'platFormId': this.tipPopover.platFormId
                };
                switch(this.type){
                    case 0:
                        this.$store.dispatch('deleteAdSeries',this.deleteData)
                            .then(response => {
                                if(response.data && response.data.code == 1){
                                    Message.success({
                                        message: '删除成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                            });
                        break;
                    case 1:
                        this.$store.dispatch('deleteAdGroup',this.deleteData)
                            .then(response => {
                                if(response.data && response.data.code == 1){
                                    Message.success({
                                        message: '删除成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                            });
                        break;
                    case 2:
                        this.$store.dispatch('deleteAd',this.deleteData)
                            .then(response => {
                                if(response.data && response.data.code == 1){
                                    Message.success({
                                        message: '删除成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                            });
                        break;
                }
            }
        },
        props: {
            'type':{
                default: 0
            }
        },
        computed:{
            ...mapGetters({
                    'showPopover': 'getShowPopover',
                    'showTipPopover': 'getShowTipPopover',
                    'popover': 'getPopoverData',
                    'tipPopover': 'getTipPopoverData',
                    'feedbackStatus': 'getFeedbackStatus'
                })
        },
        created() {

        }
    }
</script>

<style scoped lang="scss">
    .btn_common_cancel {
        margin-right: 20px;
    }
    .el-input {
        width: 220px;
        height: 28px;
    }
    .btn-common {
        margin-left: 10px;
    }
    .aim {
        width: 100%;
        padding: 10px 0 0 10px;
        display: inline-block;
        font-size: 13px;
        color: #666666;
        span {
            float: left;
            .icon-tip {
                color: #FFC000;
                margin-right: 5px;
            }
        }
    }
    .tip-wrapper {
        display: inline-block;
        padding: 0 20px;
        .tip-left {
            color: #FFC000;
            font-size: 25px;
            float: left;
            text-align: center;
            line-height: 30px;
            margin-right: 15px;
            .icon-tip2 {
                font-size: 28px;
            }
        }
        .tip-right {
            float: left;
            .tip-title {
                float: left;
                width: 100%;
                font-size: 14px;
                color: #666666;
                line-height: 30px;
            }
            .tip-txt {
                float: left;
                font-size: 12px;
                color: #666666;
                line-height: 28px;
            }
        }
    }
    .stringCount{
        position: relative;
        left: -25px;
        top: 0;
        display: inline-block;
        width: 20px;
        height: 34px;
        vertical-align: top;
        line-height: 34px;
        color: #999;
        font-size: 12px;
    }

</style>
